<template>
    <ul class="main">
        <li>
            <div>
                <img id="img2" :src="imageUrl" />
            </div>
            <div>
                <span id="title">{{title}}</span><br>
                <span id="remark">{{remark}}</span>
            </div>
            <div>
                <img @click="$parent.delTag(parseInt(id))" id="delete" src="http://pic.616pic.com/ys_b_img/00/13/31/7hRvwfJmSC.jpg" alt="">
                <img @click="$parent.dataRemark(parseInt(id))" id="rem" src="http://pic.616pic.com/ys_b_img/00/31/95/NYeOov9Bcp.jpg" alt="">
            </div>
        </li>
    </ul>
</template>
<style>
    .main{	width: 100%;
				background-color: #fff;
				height: 600px;
				border-radius: 20px;
				margin-top: 20px;
				padding: 20px;

    }

    #img2 {
        width: 40px;
        height: 40px;
        float: left;
        border-radius: 25%;
    }

    #remark {
        color: rgb(203, 201, 201);
        display: inline-block;
        margin-left: -57%;
    }

    #title {
        display: inline-block;
        float: left;
        margin-left: 3%;
    }

    #delete {
        width: 22px;
        height: 22px;
        margin-right: 6%;
        margin-top: -4%;
        float: right;
        border-radius: 50%;
    }

    #rem{
        width:  22px;
        height:  22px;
         margin-right: 3%;
        margin-top: -4%;
        float: right;
        border-radius: 50%;
    }

</style>
<script>

    export default {
        name: "LineTag",
        props: {
            id:{
                type: Number,
                default() {
                    return -1
                }
            },
            title: {
                type: String,
                default() {
                    return "标题"
                }
            },
            remark: {
                type: String,
                default() {
                    return "备注"
                }
            },
            imageUrl: {
                type: String,
                default() {
                    return "http://pic.616pic.com/ys_img/00/14/17/ywY6h6XA4b.jpg"
                }
            }
        },
        data() {
            return {
                mydata: []
            }
        },
        methods: {
            del() {
               
                console.log("元素移除了")
            }
        }
    }
</script>